 /*
 * @description: 创建岗位弹窗
 * @Author: along
 * @Date: 2021-07-09
 * @Last Modified by:
 * @Last Modified time: 2021-07-09
 */
<template>
    <el-dialog
        :title="model_title"
        :visible.sync="dialogVisible"
        width="640px"
        :close-on-click-modal="true"
        class="__createPlatformDialog33"
    >
        <!-- 新增岗位 -->
        <template v-if="type == 'create'">
            <div class="__boxs">
                <div
                    v-for="(row,index) in dataList"
                    :key="index"
                    class="__items"
                >
                    <div class="__items_nav">
                        <p class="__items_title">岗位信息{{ index + 1 }}</p>
                        <p
                            v-if="dataList.length > 1"
                            class="__items_delete"
                            @click="handleDelete(index)"
                        >删除</p>
                    </div>
                    <div class="__list">
                        <div class="__next">
                            <p class="__next_name">岗位名称</p>
                            <el-input
                                v-model="row.post_name"
                                placeholder="请输入岗位名称"
                                size="small"
                                :style="{width: '360px'}"
                            />
                        </div>
                        <div class="__next">
                            <p class="__next_name">所属部门</p>
                            <el-select
                                v-model="row.department"
                                clearable
                                filterable
                                placeholder="请选择"
                                size="small"
                                :style="{width: '360px'}"
                            >
                                <el-option
                                    v-for="item in departmentList"
                                    :key="item.department_no"
                                    :label="item.name"
                                    :value="item.department_no"
                                />
                            </el-select>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 添加按钮 -->
            <div
                class="__button"
                @click="handleAddData()"
                :style="{marginTop: '20px'}"
            >
                <i class="iconfont el-icon-hand-iconjia"/>
                继续添加岗位
            </div>
        </template>

        <!-- 编辑岗位 -->
        <template v-if="type == 'edit'">
            <div class="__items">
                <div class="__items_nav">
                    <p class="__items_title">岗位信息</p>
                </div>
                <div class="__list">
                    <div class="__next">
                        <p class="__next_name">岗位名称</p>
                        <el-input
                            v-model="row.post_name"
                            placeholder="请输入岗位名称"
                            size="small"
                            :style="{width: '360px'}"
                        />
                    </div>
                    <div class="__next">
                        <p class="__next_name">所属部门</p>
                        <el-select
                            v-model="row.department"
                            clearable
                            filterable
                            placeholder="请选择"
                            size="small"
                            :style="{width: '360px'}"
                            :disabled="true"
                        >
                            <el-option
                                v-for="item in departmentList"
                                :key="item.department_no"
                                :label="item.name"
                                :value="item.department_no"
                            />
                        </el-select>
                    </div>
                </div>
            </div>
        </template>

        <!-- 底部按钮 -->
        <div class="dialog-footer">
            <el-button
                type="default"
                size="medium"
                @click="dialogVisible = false"
                :style="{width: '120px', marginRight: '32px'}"
            >
                取 消
            </el-button>
            <el-button
                size="medium"
                type="primary"
                :style="{width: '120px'}"
                @click="handleConfirm()"
            >
                确 定
            </el-button>
        </div>
    </el-dialog>
</template>

<script>
export default {
    data () {
        return {
            dialogVisible: false,
            model_title: '',
            row: { //编辑时使用
                post_name: '',
                department: ''
            },
            dataList: [{ //新增时使用
                post_name: '',
                department: ''
            }],
            type: '',
            departmentList: []//部门列表
        };
    },
    methods: {
        /**
         * @description 显示弹窗
         * @param   {Object}    row     //接收数据
         * @param   {String}    type    //edit:编辑 create：创建
         */
        showDialog (row = {}, type = '') {
            this.type = type;
            this.row = row;
            this.model_title = type == 'edit' ? '编辑岗位' : '创建岗位';
            this.dialogVisible = true;

            if(this.type == 'create') {
                this.dataList = [{
                    post_name: '',
                    department: ''
                }];
            }

            if(this.type == 'edit') {
                this.$set(this.row, 'post_name', row.name);
                this.$set(this.row, 'department', row.department_no);
            }

            this.getList();//获取部门数据列表
        },

        /**
         * @description 添加数据
         */
        handleAddData () {
            this.dataList = this.dataList.concat([{
                post_name: '',
                department: ''
            }]);

            this.$nextTick(() => {
                setTimeout(() => {
                    document.querySelector('.__boxs').scrollTo(0,999);
                }, 100);
            });
        },

        /**
         * @description 删除数据
         */
        handleDelete (index) {
            this.dataList.splice(index, 1);
        },

        /**
         * @description 获取数据列表
         */
        getList () {
            this.$post('/__local/system%5Cdepartment%5Cget_simple_list',{},resp=>{
                if (resp.code == 1) {
                    this.departmentList = resp.data.list;
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 确定添加数据
         */
        handleConfirm () {
            const next = () => {
                const data = {
                    type: this.type,
                    list: this.dataList,
                    row: this.row
                };

                this.$emit('confirm', data);
                this.dialogVisible = false;
            };

            if(this.type == 'create') {
                let status = true;

                for(let i=0; i<this.dataList.length; i++) {
                    if(!this.dataList[i]['post_name']) {
                        this.$notify({
                            title: '提示',
                            message: '部门名称不可以为空',
                            type: 'warning',
                            duration: 2000
                        });
                        status = false;
                    }
                    if(!this.dataList[i]['department']) {
                        this.$notify({
                            title: '提示',
                            message: '所属部门不可以为空',
                            type: 'warning',
                            duration: 2000
                        });
                        status = false;
                    }
                }

                if(status) next();
            }

            if(this.type == 'edit') next();
        }
    }
};
</script>

<style lang="less">
.__createPlatformDialog33 {
    display: flex;
    flex-direction: column;
    align-items: center;
    .__button {
        width: 512px;
        height: 36px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px rgba(32, 160, 255, 1) dashed;
        border-radius: 4px;
        margin: 0 64px 24px 64px;
        color: rgba(32, 160, 255, 1);
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        .el-icon-hand-iconjia {
            color: rgba(32, 160, 255, 1);
            font-size: 14px;
            margin-right: 10px;
        }
    }
    .dialog-footer {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 76px;
        box-sizing: border-box;
        border-top: 1px rgba(220, 223, 230, 1) solid;
    }
    .__boxs {
        max-height: 350px;
        overflow: hidden;
        overflow-y: auto;
        margin: 0;
        &::-webkit-scrollbar {
            width: 3px;
        }
    }
    .__items {
        // width: 512px;
        // height: 180px;
        background: #FAFAFA;
        border-radius: 4px;
        border: 1px solid #EEEEEE;
        margin: 0 64px;
        margin-bottom: 24px;
        padding-bottom: 24px;
        .__items_nav {
            width: 100%;
            height: 40px;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            padding: 0 24px;
            justify-content: space-between;
            border-bottom: 1px rgba(220, 223, 230, 1) solid;
            .__items_title {
                color: rgba(51, 51, 51, 1);
                font-size: 14px;
                font-weight: 500;
            }
            .__items_delete {
                color: rgba(32, 160, 255, 1);
                font-size: 14px;
                font-weight: 500;
                cursor: pointer;
            }
        }
        .__list {
            margin: 4px 34px 0 44px;
            .__next {
                display: flex;
                align-items: center;
                margin-top: 20px;
                .__next_name {
                    color: rgba(51, 51, 51, 1);
                    font-size: 14px;
                    position: relative;
                    margin-right: 10px;
                    &::before {
                        content: '*';
                        position: absolute;
                        left: -6px;
                        top: 0;
                        color: rgba(249, 91, 86, 1);
                        font-size: 14px;
                    }
                }
            }
        }
    }
    .el-dialog__body {
        padding: 24px 0 0 0;
    }

    .el-dialog__header {
        padding-top: 10px;
        box-shadow:0 1px 0 0 rgba(233,233,233,1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;
        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }
        .el-icon-close:before {
            color: rgb(194,194,194);
            font-size: 17px;
            font-weight: bold;
        }
        .el-dialog__headerbtn {
            top: 14px;
        }
    }
}
</style>